<template>
  <a-row class="box">
    <a-col :span="6">
      <div class="logo-box" @click.prevent="handleItem({ router: '/index' }, 1)">
        <img class="img1" src="../../../assets/home/logo.png" alt="" />
        <img class="img2" src="../../../assets/home/logo2.png" alt="" />
      </div>
    </a-col>
    <a-col :span="12">
      <ul class="list">
        <li
          class="item"
          :class="getClass(item)"
          v-for="item in showData"
          :key="item.id"
          @click.prevent="handleItem(item, item.key)"
          @mouseenter="() => (moveActive = item.key)"
          @mouseleave="() => (moveActive = 0)"
        >
          {{ item.title }}
        </li>
      </ul>
    </a-col>
    <a-col :span="3">
      <div class="change-box">
        <div class="text-box" @click="handleChange">
          <img src="../../../assets/home/change.png" />
          模式切换
        </div>
      </div>
    </a-col>
    <a-col :span="3">
      <div class="right-box">
        <div v-if="!accountInfo" class="login-box" @click="handleLogin">
          <img src="../../../assets/home/login.png" />
          登录
        </div>
        <nav-user v-else />
      </div>
    </a-col>
  </a-row>
</template>

<script>
import { mapState } from 'vuex';

import { headListData, headListData2 } from './constans.js';
import navUser from '../navBar/navUser.vue';

export default {
  name: 'Header',
  components: { navUser },
  data() {
    return {
      showData: headListData,
      // 导航栏高亮
      show: false,
      moveActive: 0
    };
  },
  computed: {
    ...mapState({
      accountInfo: state => state.user.accountInfo,
      showMenu: state => state.user.showMenu,
      listActive: state => state.user.listActive
    })
  },
  mounted() {
    this.saveListActive();
  },
  methods: {
    saveListActive() {
      if (this.$route.path == '/userSystem/itemList') {
        this.show = true;
        this.showData = headListData2;
      } else {
        this.show = false;
        this.showData = headListData;
      }
      let selectPath = this.showData.filter(item => item.router == this.$route.path);
      if (selectPath.length) {
        // this.listActive = selectPath[0].key;
        this.$store.dispatch('user/setListActive', selectPath[0].key);
      }
    },
    handleItem(item, index) {
      if (!item.router) {
        this.$message.error('该模块暂未开放');
        return;
      }
      this.$router.push({
        path: item.router
      });
      // this.listActive = index;
      this.$store.dispatch('user/setListActive', index);
    },
    handleLogin() {
      this.$router.push({
        path: '/login'
      });
    },
    handleChange() {
      this.show = !this.show;
      this.$nextTick(() => {
        if (this.show) {
          this.showData = headListData2;
        } else {
          this.showData = headListData;
        }
      });
    },
    handleShowMenu() {
      if (this.showMenu) {
        this.$store.dispatch('user/updateShow', !this.showMenu);
      } else {
        setTimeout(() => {
          this.$store.dispatch('user/updateShow', !this.showMenu);
        }, 500);
      }
    },
    getClass(item) {
      let strone;
      let strtwo;
      strone = this.listActive == item.key ? 'itemActiveBlue' : '';
      strtwo = this.moveActive == item.key ? 'itemActiveBlueNoBorder' : '';
      return strone + ' ' + strtwo;
    }
  }
};
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 68px;
  padding: 8px 0px;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #082a63 0%, #1e7ac9 6.15%, #052255 17.41%, #051c2b 88.09%, #051c2b 100%);
  color: #fff;

  .logo-box {
    display: flex;
    align-items: center;
    padding-left: 24px;

    .img1 {
      width: 46px;
      height: 46px;
    }
    .img2 {
      width: 280px;
      height: 25px;
    }
    .text {
      font-size: 24px;
      color: #ffffff;
      margin-left: 18px;
    }
  }

  .list {
    color: #34364b;
    display: flex;
    align-items: center;
    margin: 0;

    .item {
      cursor: pointer;
      margin-left: 20px;
      margin-right: 20px;
      padding: 16px 0;
      box-sizing: border-box;
      color: #fff;
      font-size: 18px;
      font-weight: 400;
    }

    .itemActive {
      font-size: 24px;
      color: #ffffff;
    }
    .itemActiveBlue {
      font-size: 20px;
      color: #00ddff;
      font-weight: 700;
      border-bottom: 3px solid #00ddff;
    }
    .itemActiveBlueNoBorder {
      color: #00ddff;
    }
  }
  .right-box {
    display: flex;
    align-items: center;
    font-size: 16px;
    justify-content: flex-end;
    padding-right: 24px;
    .login-box {
      width: 96px;
      height: 46px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 40px;
      border: 1px solid #fff;
      color: #fff;
      img {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }
    }
  }
  .change-box {
    display: flex;
    align-items: center;
    font-size: 16px;
    justify-content: flex-end;
    padding-right: 24px;
    .text-box {
      cursor: pointer;
      width: 120px;
      height: 46px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 40px;
      color: #00ddff;
      background: #000000;
      img {
        width: 16px;
        height: 16px;
        margin-right: 8px;
      }
    }
  }
}
</style>
